<template>
  <el-dialog
    :visible.sync="dialogFormVisible"
    :before-close="handleClose"
    :show-close="true"
    :append-to-body="false"
    :class="{'mobile-el-dialog': showMobilePage}"
    title=""
    class="medium-common-dialog-size"
    center>
    <div class="main">
      <div class="title-container">
        <div><Title title="收款账户"/></div>
        <div class="tip">请选择需要填写的收款账户信息</div>
      </div>
      <u-table
        :data="accountData"
        :row-height="49"
        :height="tableHeight"
        :border="false"
        class="fb-table"
        element-loading-text="加载中..."
        header-cell-class-name="order-data-header-cell"
        fit
        hightlight-current-row>
        <u-table-column width="50" fixed="left">
          <template slot-scope="scope">
            <el-radio v-model="selectId" :label="scope.row.id"><span/></el-radio>
          </template>
        </u-table-column>
        <u-table-column
          v-for="item in tableLabels"
          :key="item.key"
          :label="item.label"
          :min-width="item.width || 120"
          align="left">
          <template slot-scope="scope">
            <ToolTip :content="scope.row[item.key]" />
          </template>
        </u-table-column>
      </u-table>
      <div style="display:flex;justify-content:center;margin-top: 20px;">
        <el-button type="primary" size="small" @click="handleOk">确定</el-button>
        <el-button class="cancel-btn-style" size="small" style="width: 80px" @click="handleClose()">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { mapState } from 'vuex';
import Title from '@/components/Title';
export default {
  components: { Title },
  data() {
    return {
      dialogFormVisible: false,
      accountData: [],
      tableHeight: '',
      selectId: ''
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    tableLabels() {
      return [
        { key: 'payNum', label: '银行账号', width: 180 },
        { key: 'payName', label: '户名', width: 150 },
        { key: 'subBank', label: '对方开户行', width: 160 },
        { key: 'contactPerson', label: '对方联系人', width: 160 },
        { key: 'tel', label: '联系人电话', width: 120 },
        { key: 'province', label: ' 供应商地址', width: 180 }
        // { key: 'bank', label: '银行', width: 150 },
        // { key: 'identityNumber', label: '身份证号', width: 180 },
        // { key: 'createUserName', label: '创建人', width: 120 },
        // { key: 'departmentName', label: '所属部门', width: 120 }
      ];
    }
  },
  methods: {
    handleClose() {
      this.dialogFormVisible = false;
      this.accountData = [];
      this.selectId = '';
    },
    openDialog(list) {
      const clientHeight = window.innerHeight;
      this.tableHeight = (clientHeight * 2) / 5;

      this.dialogFormVisible = true;
      this.accountData = list;
    },
    handleOk() {
      if (!this.selectId) {
        this.$message.warning('请选择一条收款账号信息');
        return;
      }
      const selectItem = this.accountData.find(i => i.id === this.selectId);
      if (selectItem) {
        this.$emit('fillAccount', selectItem);
      }
      this.handleClose();
    }
  }
};
</script>

<style lang="scss" scoped>
.title-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .tip {
    margin-left: 5px;
  }
}
</style>
